/*
 * Styles of main component of JQuery Form Builder plugin, 
 * the Form Builder container itself. 
 * 
 * Revision: @REVISION
 * Version: @VERSION
 * Copyright 2011 Lim Chee Kin (limcheekin@vobject.com)
 *
 * Licensed under Apache v2.0 http://www.apache.org/licenses/LICENSE-2.0.html
 *
 * Date: 
 */
 
/* REF: http://www.thesitewizard.com/css/design-2-column-layout.shtml */
#builderPalette {
  float: left;
  width: 325px;
  padding: 0;
}  
  
#builderForm {
  margin-left: 340px;
}

#builderPanel {
  border: 1px solid #ccc;  
  min-height: 415px;	  
  padding: 1em;
}

.buttons {
    border: 1px solid #ccc;
    color: #666;
    font-size: 10px;
    margin-top: 5px;
    overflow: hidden;
    padding: 0;
}       

#footer {
	clear: both;
	text-align: center;
	margin-top: 5px;
}

#header {
	/* text-align: center; */
}

.floatingPanel {

}		

#addField, #fieldSettings, #formSettings {
  height: 430px
}

#paletteTabs {
		font-size: 12px;
		margin: 0;
		width: 325px;		
}

/* Add Field Panel */
.fbWidget {
   margin: 5px;
   width: 130px;
}

/* Builder Panel */
#emptyBuilderPanel {
	text-align: center;
	top: 5em;
	color: grey;
	font-size: 20px;
	position:relative;
}

#builderPanel fieldset {
  min-height: 355px; 
}

/* for drag and drop */
div.ctrlHolder { padding: 1em }

.uniForm .ctrlHolder {
	 position:relative; 
	 cursor: pointer; 
/*	 padding: 1em 1.5em 1em 1em;*/
}

.uniForm .ctrlHolder .closeButton {
	 position:absolute;
	 top:1px;
	 right:1px;
}

.uniForm .noBorderBottom { border-bottom: 0; }

.dragBox {
	opacity: 0.6;
	border: 5px solid #cccccc;
}

/* Field Settings Panel */
#fieldSettings {
	padding: 1em;
}

#fieldSettings fieldset, #formSettings fieldset { padding: 1em; border: 1px solid #C0C0C0; margin-bottom: 1em }

#fieldSettings div.general, #formSettings div.general { padding: 0; margin: 0 }

/*#builderPalette fieldset div.legend { text-align: right }*/

.twoCols, .threeCols { clear: both; padding:0; margin: 0;}
  	
div.labelOnTop { padding-top: 0em; padding-bottom: 2.5em; } /*border-bottom: 1px solid #C0C0C0;*/

div.labelOnTop textarea { padding: 0; margin-bottom: 0.5em }

.clear {
  clear: both;
}

#fieldSettings label, #formSettings label {
  padding-bottom: 2px;
}

div.labelOnTop label {
   float: left;
}
    
div.labelOnTop input, div.labelOnTop select, div.labelOnTop textarea {
   float: left;
   width: 98%;
    }
    
.twoCols .col1 {
 float: left;
 width: 48%;
  }     
  
div.noPaddingBottom { padding-bottom: 0; }

.twoCols .col2 {
	margin-left: 52%;
 }

.threeCols { display: table; width: 100% }
.threeCols .col1 {
  display: table-cell;
  width: 32%;
}

.threeCols .col2 {
  display: table-cell;	
	margin-left: 2%;
	width: 32%;
 }
 
.threeCols .col3 {
  display: table-cell;	
	margin-left: 2%;
	width: 32%;
 }
 
/* Color panel: color picker styles */
#field\.backgroundColor, #field\.color, 
#form\.backgroundColor, #form\.color  { width: 8em }

#field\.label\.backgroundColor, #field\.label\.color, 
#field\.value\.backgroundColor, #field\.value\.color,
#field\.description\.backgroundColor, #field\.description\.color { width: 4em }

/* Font styles */
.floatClearLeft { float:left; clear:left }

.floatLeft { float:left }

/* Font Panel 
From: http://stackoverflow.com/questions/2611083/css-equivalent-of-table-rowspan-with-fluid-height
*/
.twoRowsOneRow { display: table }
.twoRowsOneRow .row1col1 { display: table-cell; width: 48%; margin-right: 2% }
.twoRowsOneRow .row2col1 { margin-top: 1em }
.twoRowsOneRow .row1col2 { display: table-cell; vertical-align: middle; width: 48%; margin-left: 2% }

/* Form Settings */
#form\.heading, #form\.horizontalAlignment { width: 100% }